<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			window.onload = function() {
				var canvas = document.getElementById("canvas")
				var cxt = canvas.getContext("2d")
				canvas.width = 800;
				canvas.height = 600;

				canvasx = canvas.getBoundingClientRect().left //返回canvas距离左边的距离
				canvasy = canvas.getBoundingClientRect().top //返回canvas距离上边的距离
				var startx;
				var starty;
				canvas.addEventListener("mousedown", downfun);

				function downfun(e) {
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;
					console.log(startx + ', ' + starty)
				}

				//创建img对象
				var img1 = new Image()
				img1.src = "img/kangyi1.png"
				var img2 = new Image()
				img2.src = "img/kangyi2.png"
				var img3 = new Image()
				img3.src = "img/kangyi3.png"
				var img4 = new Image()
				img4.src = "img/kangyi4.png"
				var img5 = new Image()
				img5.src = "img/kangyi5.png"
				var img6 = new Image()
				img6.src = "img/kangyi6.png"
				var img_frame = new Image()
				img_frame.src = "img/photoFrame.png"
				var img_frame1 = new Image()
				img_frame1.src = "img/photoFrame1.png"

				//图片对象必须加载后才可以使用
//				img.onload = function() {
//					cxt.drawImage(img, 70, 50)
//				}
				
				img1.onload = function() {
					cxt.drawImage(img1, 50, 50, 200, 150)
				}
				img2.onload = function() {
					cxt.drawImage(img2, 290, 50, 200, 150)					
				}
				img3.onload = function() {
					cxt.drawImage(img3, 530, 50, 200, 150)
				}
				img4.onload = function() {
					cxt.drawImage(img4, 50, 360, 200, 150)
				}
				img5.onload = function() {
					cxt.drawImage(img5, 290, 360, 200, 150)
				}
				img6.onload = function() {
					cxt.drawImage(img6, 530, 360, 200, 150)
				}
				img_frame1.onload = function() {
					for (var i = 0; i < 2; i++) {
						for (var j = 0; j<3; j++) {
							cxt.drawImage(img_frame1, 50 + 240 * j, 50 + 300 * i, 200, 150)
						}
					}
				}
			}
		</script>
	</body>

</html>